<template>
  <div class="list-container">
    <div class="list-head">
      <img src="@/assets/images/back.png" alt="" class="back" @click="onBack" />
      <span class="head-title">智慧终端</span>
    </div>
    <div class="content">
      <div class="list-items">
        <div class="tit">智能赔偿计算</div>
         <router-link to="/pageview?key=c1" class="item bblue">工伤赔偿<span class="small">快速计算</span></router-link>
        <router-link to="/pageview?key=c2" class="item bred">工伤赔偿<span class="small">伤残鉴定</span></router-link>
        <router-link to="/pageview?key=c3" class="item bblue">交通事故<span class="small">赔偿计算</span></router-link>
        <router-link to="/pageview?key=c4" class="item bred">物业纠纷<span class="small">物业费纠纷</span></router-link>
        <router-link to="/pageview?key=c5" class="item bblue">婚姻问题<span class="small">财产问题</span></router-link>
        <router-link to="/pageview?key=c6" class="item bred">旅游纠纷</router-link>
        <router-link to="/pageview?key=c7" class="item bblue">民间借贷<span class="small">利息计算</span></router-link>
        <!-- <router-link to="/pageview?key=c7" class="item bred">民间借贷<span class="small">利息计算</span></router-link> -->
      </div>
      <div class="list-items">
        <div class="tit">更多法律援助</div>
        <router-link to="/list?type=1" class="item bblue">请律师</router-link>
        <router-link to="/list?type=2" class="item bred">请法援</router-link>
        <router-link to="/list?type=3" class="item bblue">办公证</router-link>
        <router-link to="/pageview?key=falvzy" class="item bred">法律咨询></router-link>
        <router-link to="/list?type=5" class="item bblue">要仲裁</router-link>
        <router-link to="/list?type=6" class="item bred">寻鉴定</router-link>
        <router-link to="/list?type=7" class="item bblue">找调解</router-link>
        <router-link to="/pageview?key=falvfatiao" class="item bred">法规法条></router-link>
      </div>
    </div>
    <!-- <div class="foot">
      <div class="foot-item">重庆市司法局</div>
      <div class="foot-item">重庆市普法办</div>
    </div> -->
  </div>
</template>

<script>
export default {
  methods: {
    onBack() {
      this.$router.go(-1);
    },
  },
};
</script>

<style lang="less" scoped>
.list-container{
   background: url('../../static/linkLogo/backImg.png') 100% 100%;
  .content {
    min-height: calc(100vh - 0.74rem);
    display: flex;
    // flex-direction: column;
    justify-content: center;
    // align-items: center;
    padding-top: 40px;
  }
  .list-head {
    background:rgb(156, 18, 13);
    height: 0.44rem;
    position: relative;
    text-align: center;
    .back {
      position: absolute;
      width: 0.26rem;
      height: 0.26rem;
      display: block;
      left: 0.12rem;
      top: 0.09rem;
    }
    .head-title {
      font-size: 0.16rem;
      line-height: 0.44rem;
      color: #fff;
    }
  }
  .list-items {
    display: block;
    padding: 0 0.3rem;
    width: 40%;
    .tit{
      font-size: 22px;
      font-weight: 700;
      text-align: center;
      margin-bottom: 10px;
    }
    .item {
      display: block;
      width: 100%;
      margin-bottom: 0.2rem;
      font-size: 0.2rem;
      color: #333;
      height: 0.6rem;
      line-height: 0.6rem;
      text-align: center;
      border-radius: .1rem;
      background: #fff;  /* fallback for old browsers */
      // background: -webkit-linear-gradient(to right, #2F80ED, #56CCF2);  /* Chrome 10-25, Safari 5.1-6 */
      // background: linear-gradient(to right, #2F80ED, #56CCF2); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

      // &.bred {
      //   background: #2193b0;  /* fallback for old browsers */
      //   background: -webkit-linear-gradient(to right, #6dd5ed, #2193b0);  /* Chrome 10-25, Safari 5.1-6 */
      //   background: linear-gradient(to right, #6dd5ed, #2193b0); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

      // }
      // &.bblue {
      //   background: #7F7FD5;  /* fallback for old browsers */
      //   background: -webkit-linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5);  /* Chrome 10-25, Safari 5.1-6 */
      //   background: linear-gradient(to right, #91EAE4, #86A8E7, #7F7FD5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

      // }
    }
  }
  .foot{
    height: .3rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    font-size: .13rem;
    line-height: 1.2;
    background: rgb(156, 18, 13);
    color: #fff;
  }
}
</style>